import QtQuick 2.9
import QtQuick.Controls 1.3  as QC1
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import Qt.labs.calendar 1.0 as Labs
import Quick.SystemComponent.Theme 0.1


Page{
    id:root
    title: "Button"

    function dayValid(date){
        var myArray = []
        myArray[0]="13";
        myArray[1]="17";
        myArray[2]="26";

        for(var i = 0; i < myArray.length;i++)
        {
            if (myArray[i] === date)
            {
                return(false);
            }
        }
        return(true);
    }

    QC1.Calendar {
        id:_1xCalender
        visible: false
        style: CalendarStyle {
            gridVisible: false
            dayDelegate: Rectangle {
                property bool dayIsValid: dayValid(styleData.date.getDate().toString())

                gradient: Gradient {
                    GradientStop {
                        position: 0.00
                        color: styleData.selected && dayIsValid ? "#148014" : (styleData.visibleMonth && styleData.valid ? (dayIsValid ? "#CCCCCC" : "#FFFFFF") : "#FFFFFF");
                    }
                }

                Label {
                    text: styleData.date.getDate()
                    anchors.centerIn: parent
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: "#EEEEEE"
                    anchors.bottom: parent.bottom
                }

                Rectangle {
                    width: 1
                    height: parent.height
                    color: "#EEEEEE"
                    anchors.right: parent.right
                }
            }
        }
    }




    GridLayout {
        id:labsCalendar
        visible: false
        columns: 2

        Labs.DayOfWeekRow {
            locale: grid.locale

            Layout.column: 1
            Layout.fillWidth: true
        }

        Labs.WeekNumberColumn {
            month: grid.month
            year: grid.year
            locale: grid.locale

            Layout.fillHeight: true
        }

        Labs.MonthGrid {
            id: grid
            //month: Labs.Calendar.December
            month: 4
            year: 2019
            locale: Qt.locale("zh_CN")

            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }



    ListView {
        id: listview
        visible: false
        snapMode: ListView.SnapOneItem
        orientation: ListView.Horizontal
        highlightRangeMode: ListView.StrictlyEnforceRange

        Labs.DayOfWeekRow {
            locale: grid.locale
            width: listview.width
            height: 20
        }
        model: Labs.CalendarModel {
            from: new Date(2017, 0, 1)
            to: new Date(2020, 11, 31)
        }

        delegate: Labs.MonthGrid {
            width: listview.width
            height: listview.height

            property int isOpacity: model.month === month ? 1 : 0

            month: model.month
            year: model.year
            locale: Qt.locale("zh_CN")
            //delegate: calenderDeleFont

        }

        ScrollIndicator.vertical: ScrollIndicator { }
        ScrollIndicator.horizontal: ScrollIndicator { }
    }


    Component{
        id:calenderDeleFont
        Text {
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            opacity: model.month === month ? 1 : 0
            text: model.day
            color: Theme.textColor
        }
    }
    StackView{
        id:cStack
        anchors.fill: parent
        initialItem: _1xCalender
    }

    Action {
        id: _1x
        text: qsTr("_1x")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: cStack.replace(cStack.currentItem,_1xCalender)
    }
    Action {
        id: labs
        text: qsTr("labs")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered:  cStack.replace(cStack.currentItem,labsCalendar)
    }

    Action {
        id: labModel
        text: qsTr("labModel")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered:  cStack.replace(cStack.currentItem,listview)
    }

    footer:ToolBar {
        Row {
            anchors.fill: parent
            spacing: 10
            ToolButton { action: _1x }
            ToolButton { action: labs }
            ToolButton { action: labModel }
        }
    }

    background: Rectangle{
        color: "#F4A360"
    }


}
